import React, { useState, useEffect, useRef } from 'react'
import Navbar from '@/components/Navbar/'
import { List, DatePicker, Popup, Toast, Dialog } from 'antd-mobile'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { getProfile, updatePhoto, logout } from '@/store/actions/mine.js'
import classNames from 'classnames'
import EditInput from './component/EditInput'
import { updateUserInfo } from '@/store/actions/mine'
import EditList from './component/EditList'
import dayjs from 'dayjs'
import { useHistory } from 'react-router-dom'

function Edit() {
    const [visible, setVisible] = useState(false)
    const history = useHistory()
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(getProfile())
    }, [dispatch])
    const { profile } = useSelector(state => state.mine)
    const [propShow, setPropShow] = useState({
        type: false,
        current: ''
    })
    // 关闭统一弹窗
    const onClose = (type) => {
        setPropShow({
            type,
            current: ''
        })
        setShowList({
            type: false,
            value: ''
        })
    }
    // 提交修改
    const onSubmit = async (current, value) => {
        await dispatch(updateUserInfo(current, value))
        Toast.show({
            icon: 'success',
            content: '修改成功',
            duration: 1000
        })
        onClose()
    }
    // 修改性别列表和头像列表
    const [showList, setShowList] = useState({
        type: false,
        value: ''
    })
    // 上传文件
    const fileRef = useRef(null)
    const onFile = () => {
        fileRef.current.click()
    }
    const updateFile = (e) => {
        // e.target.value
        let fd = new FormData()
        fd.append('photo', e.target.files[0])
        dispatch(updatePhoto(fd))
        Toast.show({
            icon: 'success',
            content: '修改头像成功',
            duration: 1000
        })
        onClose()
    }
    // 退出登陆
    const logoutFn = () => {
        Dialog.confirm({
            content: '是否确认退出',
            onConfirm: async () => {
                await dispatch(logout())
                Toast.show({
                    icon: 'success',
                    content: '退出成功',
                    duration: 1000
                })
                history.push('/login')
            },
        })
    }

    return (
        <div className={styles.root}>
            <div className='content'>
                <Navbar>个人信息</Navbar>
                <div className='wrapper'>
                    {/* 列表一 头像昵称简介 */}
                    <List className='profile-list'>
                        <List.Item
                            extra={
                                <span className="avatar-wrapper">
                                    <img src={profile.photo} alt="" />
                                </span>} clickable
                            onClick={() => setShowList({
                                type: true,
                                value: 'photo'
                            })}
                        >头像
                        </List.Item>
                        <List.Item
                            onClick={() => {
                                setPropShow({
                                    type: true,
                                    current: 'name'
                                })
                            }}
                            extra={profile.name}>昵称
                        </List.Item>
                        <List.Item
                            onClick={() => {
                                setPropShow({
                                    type: true,
                                    current: 'intro'
                                })
                            }}
                            extra={profile.intro || '未填写'}
                            className={classNames('intro', profile.intro ? 'normal' : '')}>简介
                        </List.Item>
                    </List>
                    {/* 列表一 头像昵称简介 */}

                    {/* 列表二 性别生日 */}
                    <List className='profile-list'>
                        <List.Item
                            onClick={() => setShowList({
                                type: true,
                                value: 'gender'
                            })}
                            extra={profile.gender === 0 ? '男' : '女'}
                        >
                            性别
                        </List.Item>
                        <List.Item onClick={() => {
                            setVisible(true)
                        }} extra={profile.birthday}>
                            生日
                            <DatePicker
                                title='时间选择'
                                visible={visible}
                                max={new Date()}
                                min={new Date('1960-1-1')}
                                onClose={() => {
                                    setVisible(false)
                                }}
                                onConfirm={val => {
                                    const date = dayjs(val).format('YYYY-MM-DD')
                                    onSubmit('birthday', date)
                                }}
                            />
                        </List.Item>
                    </List>
                    {/* 列表二 性别生日 */}

                    <Popup
                        position='bottom'
                        visible={propShow.type}
                        onClose={() => {
                            setPropShow({
                                type: false,
                                current: ''
                            })
                        }}
                        bodyStyle={{ width: '100vw', height: '100vh' }}
                    >
                        {propShow.type && <EditInput
                            onClose={onClose}
                            current={propShow.current}
                            onSubmit={onSubmit}
                        />}

                    </Popup>

                    <Popup
                        visible={showList.type}
                        onMaskClick={() => { onClose() }}
                        bodyStyle={{
                            borderTopLeftRadius: '8px',
                            borderTopRightRadius: '8px',
                            minHeight: '20vh',
                        }}
                    >
                        {<EditList
                            type={showList.value}
                            onClose={onClose}
                            onSubmit={onSubmit}
                            onFile={onFile}>
                        </EditList>}
                    </Popup>

                </div>
            </div>
            <input type="file" style={{ display: 'none' }} ref={fileRef} onChange={(e) => updateFile(e)} />
            <div className='logout'>
                <button className='btn' onClick={logoutFn}>退出登陆</button>
            </div>
        </div >
    )
}

export default Edit